<template>
  <card-layout title="生态工程" class="chart" bg="3">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeEcology',5)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>
    <div
      class="content"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255, 0.15)"
    >
      <!-- 覆盖率环形图 -->
      <div class="chart-box">
        <div class="chart-title"></div>
        <div class="chart-content">
          <div ref="coverageChartRef" class="chart"></div>
          <div class="percentage">86%</div>
        </div>
        <div class="chart-label">植被覆盖率</div>
      </div>
      <!-- 工程数量统计 -->
      <div class="stats-container">
        <div class="stat-box">
          <div class="stat-value" style="color: #fff;">10</div>
          <div class="stat-label">工程总数</div>
        </div>
        <div class="stat-box">
          <div class="stat-value" style="color: #ffa500;">8</div>
          <div class="stat-label">已完成工程数</div>
        </div>
        <div class="stat-box">
          <div class="stat-value" style="color: #4cd964;">2</div>
          <div class="stat-label">进行中工程数</div>
        </div>
      </div>
      <!-- 工程列表 -->
      <div class="project-list">
        <div class="list-header">
          <div class="header-item">工程名称</div>
          <div class="header-item">状态</div>
          <div class="header-item">当前节点</div>
          <div class="header-item">节点日期</div>
        </div>
        <div class="list-content">
          <div class="list-item" v-for="(item, index) in projectList" :key="index" :class="{ 'active': item.status === '进行中' }">
            <div class="item-cell">{{ item.name }}</div>
            <div class="item-cell">{{ item.status }}</div>
            <div class="item-cell">{{ item.currentNode }}</div>
            <div class="item-cell">{{ item.nodeDate }}</div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="50"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Close } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';

// 图表引用
const coverageChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: coverageChart } = useChart(coverageChartRef);

// 分页相关
const currentPage = ref(1);

// 工程列表数据
const projectList = ref([
  {
    name: '7022边坡修复工程',
    status: '未开始',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '未开始',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '进行中',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '已完成',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '已完成',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '已完成',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  },
  {
    name: '7022边坡修复工程',
    status: '已完成',
    currentNode: '筹备',
    nodeDate: '2025/06/09'
  }
]);

// 初始化覆盖率环形图
const initCoverageChart = () => {
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        avoidLabelOverlap: false,
        startAngle: 225,
        endAngle: -45,
        hoverAnimation: false,
        silent: true,
        label: {
          show: false
        },
        emphasis: {
          scale: false
        },
        data: [
          { value: 86, name: '已覆盖', itemStyle: { color: '#4cd964' } },
          { value: 14, name: '未覆盖', itemStyle: { color: '#e6e6e6' } }
        ]
      }
    ]
  };

  coverageChart.value.setOption(option);
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加分页加载数据的逻辑
};

onMounted(() => {
  // 初始化图表
  initCoverageChart();
});
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  height: 100%;
  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    padding: 5px;
    box-sizing: border-box;
    .chart-box {
      border-radius: 4px;
      padding: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #eef1fa;
      .chart-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
      }

      .chart-content {
        position: relative;
        width: 150px;
        height: 140px;

        .chart {
          width: 100%;
          height: 100%;
        }

        .percentage {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 28px;
          font-weight: bold;
          color: #4cd964;
        }
      }

      .chart-label {
        font-size: 14px;
        color: #fff;
      }
    }
    .stats-container {
      display: flex;
      justify-content: space-between;
      gap: 0px;
      .stat-box {
        flex: 1;
        border-radius: 4px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        .stat-label {
          font-size: 14px;
          color: #fff;
        }
      }
    }
    .project-list {
      border: 1px solid rgba(0, 50, 50, 1);
      height: 370px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .list-header {
        display: flex;
        background-color: rgba(0, 50, 50, 1);
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 50, 50, 1);
        .header-item {
          flex: 1;
          text-align: center;
          font-weight: bold;
          color: #fff;
          font-size: 14px;
        }
      }
      .list-content {
        flex: 1;
        overflow-y: auto;
        .list-item {
          display: flex;
          padding: 10px 0;
          border-bottom: 1px solid rgba(0, 50, 50, 1);
          &.active {
            background-color: rgba(22, 75, 135, 0.5);
          }
          .item-cell {
            flex: 1;
            text-align: center;
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
    .pagination {
      display: flex;
      justify-content: center;
      margin: 20px 0px 10px 0px;
    }
  }
}

// 覆盖 Element Plus 样式
:deep(.el-pagination) {
  --el-pagination-bg-color: rgba(16, 65, 125, 0.5);
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
}
</style>